<template>
  <div>
    <h1>toRaw</h1>
    <h1>{{ obj.age }}</h1>
    <input type="text" v-model="obj.age" />
    <h1>{{ objToRaw.age }}</h1>
    <input type="text" v-model="objToRaw.age" />
    <h1>{{ obj }}</h1>
    <button @click="objAddArr">触发添加arrs方法</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, markRaw, reactive, toRaw } from "vue";

export default defineComponent({
  setup() {
    const obj = reactive<any>({
      name: "tom",
      age: 10,
    });
    console.log(obj);
    // toRaw将reactive转到的响应式对象，转变为普通对象
    const objToRaw = toRaw(obj);
    console.log(objToRaw);

    // markRaw
    function objAddArr() {
      const arrs = [1, 2];
      // 给对象添加一个属性
      // obj.arrs = arrs;//响应式
      // 需求 我不想让新加的该属性为响应式的
      obj.arrs = markRaw(arrs); //markRaw作用就是标记对象的属性，不响应式数据,返回的是数据本身
      setTimeout(() => {
        obj.arrs[0] += 3;
      }, 500);
    }
    return {
      obj,
      objToRaw,
      objAddArr,
    };
  },
});
</script>

<style scoped>
</style>